<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="title" content="${joke.title}">
<meta name="description" content="${joke.headerContent}">
<meta name="keywords" content="${joke.title}">
<meta property="og:url" content="http://trollvl.com/truyen-cuoi/${joke.id}">
<meta property="og:title" content="${joke.title}">
<meta property="og:description" content="${joke.headerContent}">
<meta property="og:image" content="http://trollvl.com//resources/data/joke-thumbnails/${joke.image}">
<meta property="og:site_name" content="Trollvl.com">
<meta property="fb:app_id" content="299999716845708">
<meta property="og:type" content="website">
<link rel="shortcut icon" href="/resources/images/favicon.ico"
	type="image/x-icon">
<link rel="icon" href="/resources/images/favicon.ico"
	type="image/x-icon">
<script src="/resources/js/jquery.1.9.1.min.js"></script>
<script src="/resources/js/bootstrap.min.js"></script>
<script src="/resources/js/truyen-cuoi.js"></script>
<title>${joke.title}</title>
<script>
	$(function() {
		load_relative(1);
	});
</script>
</head>
<body>
	<tiles:insertDefinition name="JokeTemplate">
		<tiles:putAttribute name="body">
			<div id="mainContainer">
				<div class="mainBox">
					<div class="jokeTitle">
						<h2>${joke.title}</h2>
					</div>

					<div class="jokeHeader">
						<h3>${joke.headerContent}</h3>
					</div>
					<div class="jokeContent">
						${joke.content}
						<p class="Normal" style="text-align: right;">
							<strong>${joke.uploader.name} </strong>(<em>Sưu tầm</em>)
						</p>
					</div>
					<div class="jokeInfo">
						<div class="stats">
							<span class="views" style="margin-right: 10px;">Lượt xem:
								<fmt:formatNumber pattern="#,###,##0" value="${joke.viewNumber}" /><span
								class="number"></span>
							</span> <span class="comments">Lượt bình luận: <span
								class="number"><fmt:formatNumber pattern="#,###,##0"
										value="${joke.commentNumber}" /></span></span>
						</div>
						<div class="fb-like" data-href="/truyen-cuoi/${joke.id}"
							data-width="90" data-layout="button_count" data-action="like"
							data-show-faces="false" data-share="true"></div>
					</div>
					<div class="jokeOther">
					<div style="width: 100%; height:40px">
						<h4 style="float: left;">Tin khác</h4>
						<div id="arrowButtons" class="arrowButtons" style="margin-top: 0">
						</div>
					</div>
					<div id="list-other">
						
					</div>
					</div>
					<div class="commentContainer">
						<h4>Bình luận</h4>
						<div class="fb-comments"
							data-href="http://trollvl.com/truyen-cuoi/${joke.id}"
							data-width="708" data-colorscheme="light"></div>
					</div>
				</div>
			</div>
		</tiles:putAttribute>
	</tiles:insertDefinition>
</body>
</html>